{% extends 'gamer_view/base.html' %}
{% load static %}

{% block title_block %}
    Home
{% endblock %}

{% block body_block %}

	<!-- home page navigation buttons -->
	<div id="category_button" class="button">
	  <a href="{% url 'gamer_view:show_categories' %}" id="format_hyperlink"> Categories </a>
	</div>
	<div id="trending_button" class="button">
	  <a href="{% url 'gamer_view:trending' %}" id="format_hyperlink"> Trending </a>
	</div>
	<div id="about_us_button" class="button">
	  <a href="{% url 'gamer_view:about' %}" id="format_hyperlink">About Us</a>
	</div>
	
	<!-- search bar functionality -->
	<div>
		{% for mess in messages %}
			<div class="error_message" id="search_error"><p>{{ mess }}<p></div>
		{% endfor %} 
		<form id="search_form" method="post" action="{% url 'gamer_view:home' %}">
			{% csrf_token %}
			<div class="button" id="search_bar_button">
				<input placeholder="Search for a game..." type="text" name="gamename" maxlength="30" size="30" id="search_bar_input"/>
			</div>
		</form>
	</div>
	
	<!-- display 3 latest added games -->
	<div id="latest_additions" class="button">
	  <p> Latest Additions </p>
	</div>
	<div id="game_box" class="button">
		<div id="additions_images">
		{% for page in pages %}
			<a href={% url 'gamer_view:show_page' page.cat page.slug %} style="color:black"><img src="{{ page.image.url }}" id="home_image" alt="{{ page.gamename }}"></a>
		{% endfor %}
		</div>
	</div>
	
{% endblock %}